<!-- 听取ysl意见 , 把盘源展示和房源展示分成两个页面 -->
<template>
	<view>
		<view v-show="pageLoaded" class="house-main">
			<view class="device-status_bar"></view>
			<!--      <view class="device-header">-->
			<uni-nav-bar class="uni-nav-bar" fixed="true" style="margin-bottom:-88rpx;" :background-color="navBarColor"
				:shadow="false" :border="navBarBorder" status-bar="true">
				<view class="nav-bar-wrapper">
					<view class="nav-circle" @click="uniBack" :style="{backgroundColor: navCircleColor}">
						<uni-icons type="back" :color="uniIconColor" size="20"></uni-icons>
					</view>

				</view>

			</uni-nav-bar>

			<swiper class="swiper-wrapper" @change="swiperChange" :style="{height: swiperHeight + 'px'}">
				<swiper-item v-if="displayBuildMode" class="swipe-item-image"
					v-for="(item, index) in apiData.build_detail.build_thumb" :key="index"
					:style="{ backgroundImage: 'url('+ item +')' }"></swiper-item>
				<swiper-item v-else class="swipe-item-image" v-for="(item,index) in apiData.house_detail.house_banner"
					:key="index" :style="{ backgroundImage: 'url('+ item +')' }">

				</swiper-item>

			</swiper>

			<view class="indexTag">
				<view v-if="displayBuildMode">{{index}}/{{apiData.build_detail.build_thumb.length || 0 }}</view>
			</view>

			<view class="title-detail-info" :style="displayBuildMode ? 'min-height: 360px' : ''">

				<view class="building-title" v-if="displayBuildMode">
					{{apiData.build_detail.title}}
				</view>
				<view class="below-details-title-wrapper">
					<view v-if="displayBuildMode" class="left-price">
						{{( apiData.build_detail.build_price ) | tenMillion }}
						<view class="cn-unit">
							<text v-if="apiData.build_detail.build_price>10000">万</text>
							元/月
						</view>
					</view>
					<view class="location-icon-text">
						<image src="../../static/dw.png" style="width: 20px;height: 20px;margin-right: 5px;" mode="">
						</image>
						<view class="location-text-wrapper" v-if="displayBuildMode">
							{{apiData.build_detail.city}}-{{apiData.build_detail.area}}

						</view>

					</view>
				</view>

				<!--      盘源信息 START -->
				<view class="building-source-info">
					<view class="info-title" style="margin-top: 20px;margin-bottom: 10px;">
						盘源信息
					</view>
					<view class="content-wrapper">
						<view class="field">
							宗地号：
							<text style="color: #000000;">{{apiData.build_detail.build_no}}</text>
						</view>
						<!--          <view class="field half-width" style="background-color: white">-->
						<!--            盘源名称：-->
						<!--            <text style="color: #000000;">{{apiData.build_detail.build_area}}㎡</text>-->
						<!--          </view>-->
						<view class="field ">
							开发商：
							<text style="color: #000000;">{{apiData.build_detail.build_developer}}</text>
						</view>
						<view class="field">
							物业公司：
							<text style="color: #000000;">{{apiData.build_detail.property_company}}</text>
						</view>
						<view class="row">
							<view class="field half-width" style="background-color: white">
								建造年代：
								<text style="color: #000000;">{{apiData.build_detail.building_age}}</text>
							</view>
							<view class="field half-width" style="background-color: white">
								宗地面积：
								<text style="color: #000000;">{{apiData.build_detail.build_area_ancestral + '㎡' || (TESTING ? '后端没传' :
                  '暂无数据')
                  }}
								</text>
							</view>
						</view>
						<view class="row">
							<view class="field half-width">
								建筑面积：
								<text style="color: #000000;">{{apiData.build_detail.build_area}}㎡</text>
							</view>
							<view class="field half-width">
								容积率：
								<text style="color: #000000;">{{apiData.build_detail.plot_ratio}}%</text>
							</view>
						</view>
						<view class="row">
							<view class="field half-width">
								绿化率：
								<text style="color: #000000;">{{apiData.build_detail.build_green}}%</text>
							</view>
							<view class="field  half-width">
								使用年限：
								<text style="color: #000000;">{{apiData.build_detail.durable_years}}年</text>
							</view>
						</view>

						<view class="row">
							<view class="field half-width">
								竣工时间：
								<text style="color: #000000;">{{apiData.build_detail.completed_time}}</text>
							</view>
							<view class="field half-width">
								入伙时间：
								<text style="color: #000000;">{{apiData.build_detail.board_time}}</text>
							</view>
						</view>
						<view class="field">
							详细地址：
							<text style="color: #000000;">{{apiData.build_detail.site}}</text>
						</view>
					</view>
				</view>
				<!--      盘源信息 END -->

			</view>
			<view class="location-periphery">
				<view class="info-title" style="margin-bottom: 15px;">
					位置及周边配套
				</view>
				<map-widget :item="buildingItem"></map-widget>
			</view>

			<view class="houseRecommend" v-if="neaHouseDataLoaded">
				<view class="title">当前盘源下的房源推荐</view>
				<view v-for="(item, index) in nearHouse" :key="index">
					<my-house-card :key="item.key" :item="item" :display-build-mode="false"></my-house-card>
				</view>
				<uni-load-more class="loadMore" :status="status" :icon-size="12" :content-text="contentText" />

			</view>


			<view class="bottom-man" v-if="$store.state.userOriented">
				<view style="padding: 5px 15px;width: 100%;" class="flex">
					<view class="houseManImage" :style="{backgroundImage: 'url(' + bottomMan.head_thumb + ')'}">
					</view>
					<view style="flex-grow: 1;">
						<p v-if="displayBuildMode">{{apiData.build_detail.business.name || '匿名'}}</p>
						<p v-else>{{apiData.house_detail.business.name || '匿名'}} </p>
						<text style="font-size: 12px;color: #969799;">启租网</text>
					</view>
					<view class="ManBut" style="" @click="toMessaging(bottomMan)">
						聊天
					</view>
					<view class="ManBut" style="background-color: #004fbf;" @click="phoneCall(bottomMan.phone)">
						打电话
					</view>

				</view>
			</view>

		</view>

		<not-loaded v-show="!pageLoaded" :swiper-height="swiperHeight"></not-loaded>
	</view>

</template>

<script>
	import {
		ONLINE_SERVER_USER
	} from '../../util/network.js';

	import sHouseCard from '../../components/sHouseCard.vue';
	import myHouseCard from '../../components/myHouseCard';
	import houseMan from './houseMan.vue';
	import {
		appMixin
	} from '../../util/reuse';
	import {
		filter
	} from '../../util/reuse/filter';
	import {
		getRouterParam,
		MY_LOCATION
	} from '../../util/misc';
	import {
		uniRequest
	} from '../../util/network';
	import {
		contact
	} from './contact';
	import mapWidget from './mapWidget';
	import notLoaded from './notLoaded';

	export default {
		mixins: [appMixin, filter, contact],
		data() {
			return {

				pageLoaded: false,
				displayBuildMode: true, //  true 盘源展示, false 房源展示
				followed: 0, // 是否关注 0 未关注 1 已关注
				mapUtil: {},
				index: 1,
				houseToView: {},
				buildingItem: {},
				apiData: {
					build_detail: {
						build_area_ancestral: null, // 宗地面积
						area: null,
						board_time: null,
						build_area: null,
						build_banner: null,
						build_birth: null,
						build_developer: null,
						build_floor: null,
						build_green: null,
						build_no: null,
						build_price: null,
						build_thumb: [],
						build_type: null,
						building_age: null,
						business: {
							name: '',
							phone: '',
						},
						business_id: null,
						city: null,
						completed_time: null,
						durable_years: null,
						id: null,
						plot_ratio: null,
						property_company: null,
						province: null,
						reviewer: null,
						reviewer_id: null,
						tenant: null,
						tenant_id: null,
						title: null,
					},
					near_build_list: [],

				},
				bottomMan: {
					phone: '',
					head_thumb: '',
				},
				tagsOfDetail: [],
				nearHouse: [],
				neaHouseDataLoaded: false,
			}
		},

		components: {
			sHouseCard,
			mapWidget,
			houseMan,
			myHouseCard,
			notLoaded
		},
		mounted() {
			this.initPageData();
			// await this.$nextTick()
			// dom
		},
		computed: {
			// apiData() {
			//   if (this.displayBuildMode) {
			//     return this.apiData
			//   } else {
			//     return this.apiData_house
			//   }
			// }
		},
		methods: {
			postUrl() {
				return '/build_detail'
			},
			initPageData(cb) {
				// 从storage 取值
				let routerParam = getRouterParam()
				let position = uni.getStorageSync(MY_LOCATION)

				/// 发送请求
				let opt = {
					id: routerParam.id,
					city: position.city,
				}
				// console.log('opt : ',opt)
				let url = ONLINE_SERVER_USER + '/build_detail'

				uniRequest('', opt, {
					url: url,
					success: ({
						data
					}) => {
						if (data.code === 200) {
							this.apiData = data.data
							// console.log('apiData: ', this.apiData)
							this.washData()
							cb && cb()
						}
					}

				})
			},
			washData() { // 清晰后端返回的数据
				// 底部招商人员电话
				this.bottomMan = this.apiData.build_detail.business
				this.nearHouse = this.apiData.near_build_list[0].house
				this.neaHouseDataLoaded = true
				this.buildingItem = this.apiData.build_detail
				this.pageLoaded = true;
			},
			swiperChange(e) {
				this.index = e.detail.current + 1
			},
			back() {
				uni.navigateBack()
			},

		},
		onPageScroll(e) {
			// console.log('event: ',e)
			// this.orderHideEffect()
			this.navBarEffect(e);
		},
	}
</script>

<style lang="scss" scoped>
	@import "displayDetails";
</style>
